<template>
  <div class="panel">
    <panel-title :title="$route.meta.title"></panel-title>
    <div class="panel-body">
      <!--table顶部的查询,新增和批量删除-->
      <el-row >
        <el-form :inline="true"  :model="searchForm" class="form-inline">
          <el-form-item label="名称：">
              <el-input v-model="searchForm.name" placeholder="学校名称"></el-input>
          </el-form-item>
            <el-form-item>
            <el-button type="primary" icon="el-icon-search" size=small @click="searchClick">查询</el-button>
            <el-button type="success" icon="el-icon-plus" size=small @click="dialogVisible = true">新增</el-button>
            <el-button type="warning" icon="el-icon-delete" size=small @click="allDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </el-row>
<!--新增弹窗版面-->
      <el-dialog
        title="创建"
        :visible.sync="dialogVisible"
        width="800"
        :before-close="handleClose">
        <el-form  :model="addForm" :inline="true" :rules="rules" class="add-form">
         <el-form-item label="学校名称：">
           <el-input v-model="addForm.schoolname" placeholder="请输入学校名称" ></el-input>
         </el-form-item>
         <el-form-item label="栏目类别">
           <!-- <el-input v-model="addForm.category" placeholder="请输入栏目类别"></el-input> -->
           <el-select v-model="addForm.value"  placeholder="请选择">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             >
             </el-option>
           </el-select>
         </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="newAdd">添加</el-button>
        </span>
      </el-dialog>
    <!--table数据表-->
     <!--slice(index1,index2)函数是从数组中返回下标index1与index2之间的数据。-->
      <el-table   
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        
        style="width:100%"
            row-style="height:40px"
            cell-style="padding:0"
        @selection-change="selsChange" ><!--selection-change为复选框选项发生改变时触发的函数-->

        <!--多选，设type属性为selection即可-->
        <el-table-column
        type="selection"
        width="50"
        label="全选"
        align="center">
        </el-table-column>

        <!--显示索引index,设置type属性为index即可显示从 1 开始的索引号。-->
        <el-table-column 
        type="index"
        label="序号"
        width="50"
        align="center">
        </el-table-column>

        <el-table-column 
        sortable
        prop="schoolname"
        label="学校名称"
        width="150"
        align="center">
        </el-table-column>

        <el-table-column 
        sortable
        prop="category"
        label="栏目类别"
        width="150"
        align="center">
        </el-table-column>
      <!--编辑和删除功能按钮-->
        <el-table-column 
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="info" size=small></el-button>
          <el-button icon="el-icon-delete" type="success" size=small @click="deleteRow(scope.$index,tableData)"></el-button>
        </template>
        </el-table-column>
      </el-table> 
      <!--分页组件-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
    </el-pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
import {panelTitle} from 'components'
import { setTimeout } from 'timers';

  export default {  
    data(){
      return {
        sels:[],//设置一个数组，用于接收复选框选择的选项数据
        tableData:[],//用于接收table数据
        currentPage:1,//table当前页为第一页
        pagesize:5,//table每页的数据为5条
        searchForm:{
          name:''
        },
        addForm:{
         value:'',
         schoolname:'',
        },
        options:[{
          value:'培训测评题',
          label:'培训测评题'
        },{
          value:'企业测试题',
          label:'企业测试题'
        },{
          value:'婴幼儿(0-5岁)',
          label:'婴幼儿(0-5岁)'
        },{
          value:'儿童类(5-12岁)',
          label:'儿童类(5-12岁)'
        },{
          value:'青少年(13-18岁)',
          label:'青少年(13-18岁)'
        },{
          value:'性格',
          label:'性格'
        },{
          value:'职业发展',
          label:'职业发展'
        },{
          value:'家庭与婚姻',
          label:'家庭与婚姻'
        },{
          value:'情绪与压力',
          label:'情绪与压力'
        },{
          value:'趣味',
          label:'趣味'
        }],
  
        dialogVisible:false,//默认新增窗口为隐藏

        //table表数据，如果连上数据库即取代该部分。
       tableData:[{
         schoolname:'小学？',
         category:'幼儿？',
       },{
         schoolname:'中学？',
         category:'青少年？',
       }]
      }
    },
    components: {
      panelTitle
    },
    
    methods:{
      //表格重新加载数据：用于对数据库添加或删除数据后重新加载到页面。
      loadingData:function(){
        this.loading=true;
        setTimeout(function(){//等待300毫秒后执行前面这些代码（这里是指这具function()函数）
          console.log('数据加载成功');
          this.loading=false
        },300);
      },
      //删除功能js函数。
      deleteRow:function(index,rows){
        console.log(rows[index]);
        this.$confirm('确认删除:'+rows[index].name+'?','提示',{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type:'waring'
        }).then(()=>{
           rows.splice(index,1);  
           this.$message({
             type:'success',
             message:'删除成功！'
           });
          this.loadingData();//重新加载数据,因为为本地数据所以可没什么效果、当从数据库删除数据时页面就要重新加载数据了。 
        }).catch(()=>{
           this.$message({
             type:'info',
             message:'已取消删除！'
           });
        });    
      },
      //查询功能js函数
    searchClick:function(searchForm){
      console.log('输入的数据：'+this.searchForm.name);
    },
    //每页显示的数据数目size发生改变时触发的函数
    handleSizeChange:function(size){
      this.pagesize=size;
    },
    //改变当前页currentpage时触发的函数
    handleCurrentChange:function(currentPage){
      this.currentPage=currentPage;
    },
    //复选框选项发生改变时触发的函数
    selsChange:function(sels){
      this.sels=sels;
      console.log('1111111'+this.sels)
    },
    //点击批量删除按钮时触发的函数。
    allDelete:function(){
       console.log('2222'+this.sels);
       
    },
    //新增弹窗关闭按钮
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //点击弹窗的确定按钮，将数据添加到table.
      newAdd:function(addForm){
       this.tableData.unshift({
         schoolname:this.addForm.schoolname,
         category:this.addForm.value,
         
       }),
       this.dialogVisible = false; 
      },

      }
    }
    //
  
</script>
<style scope>
  .add-form .el-row{
    margin-bottom:20px;
  }
  .add-form .el-row i{
    display: inline-block;
    padding-top:12px;
  }
</style>